<template>
	<div class="scroll" >
		<h3>
			游戏<br/>攻略
		</h3>
		<ul :class="{animattionTop}">
			<li v-for="item in scrollList" :key="item.id" >
				<span></span>{{item.title}}
			</li>
		</ul>
	</div>
</template>

<script>
	export default
	{
		name : 'Scroll',
		data()
		{
			return {
				animattionTop : false,
				scrollList : [
					{ id:1 , title:'港珠澳大桥怎么走？穿梭巴士预约及过关全攻略' },
					{ id:2 , title:'杭州动物园里有哪些动物？跟着自然老师一起去探索吧' },
					{ id:3 , title:'清迈旅游落地签如何确定？带你了解泰北旅游小贴士' },
					{ id:4 , title:'跨国骑行初体验——日本富士山骑行攻略' },
					{ id:5 , title:'港珠澳大桥怎么走？穿梭巴士预约及过关全攻略' },
					{ id:6 , title:'杭州动物园里有哪些动物？跟着自然老师一起去探索吧' },
					{ id:7 , title:'清迈旅游落地签如何确定？带你了解泰北旅游小贴士' },
					{ id:8 , title:'跨国骑行初体验——日本富士山骑行攻略' },
				],
			}
		},
		mounted(){
			setInterval( this.showList , 2000 );
		},
		methods:{
			// 每隔2秒,数据向上滚动一条
			// 2秒之内,将移除的数据剪到数组的最后一条;animationTop恢复成false{才能保证下一次执行滚动的时候有效果}
			showList(){
				// 每隔2秒,将当前的第一条数据移出-0.67rem
				this.animattionTop = true;
				// 2秒之间,执行500毫秒之后:将当前数组的第一条数据添加到数组的末尾
				setTimeout( ()=>{
					this.scrollList.push( this.scrollList[0] );
					// 将当前已经移出的第一条数据,删除
					this.scrollList.shift();
					// 动画停止,等待下一次播放
					this.animattionTop = false;
				} , 500 );
			}
		}
	}
</script>

<style scoped >
	.scroll .animattionTop{
		margin-top: -0.67rem;
		height: 2.17rem;
		transition: all 0.5s;
	}
	.scroll
	{
		width: 100%;
		height: 1.5rem;
		/*渐变是发生在背景图片上的样式*/
		background-image: linear-gradient(#fbffaf,#ffffed);
		overflow: hidden;
	}
	.scroll h3
	{
		height: 1.5rem;
		width: 15%;
		font-size: 0.5rem;
		display: flex;
		float: left;
		align-items: center;
		justify-content: center;
		color: gold;
		font-style: italic;
		font-weight: bold;
	}
	.scroll ul
	{
		float: left;
		width: 78%;
		margin-left: 0.4rem;
		height: 1.5rem;
	}
	/* 设置省略号(3个样式同时进行);行高[限制到每次只能看到2条数据 ] */
	.scroll ul li
	{
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		line-height: 0.67rem;
	}
	.scroll ul li span
	{
		display: inline-block;
		width: 0.2rem;
		height: 0.2rem;
		border-radius: 0.1rem;
		background-color: goldenrod;
		margin-right: 0.2rem;
	}
</style>
